<template>
    <view class="register">
        <login-head :title="setPassword?'重置密码':'注册'" @back="back"></login-head>
        <view class="form-layout">
            <view class="form-li" v-if="!setPassword">
                <i class="iconfont icon-Xtubiao-qingzaicishurumima form-i"></i>
                <input 
                    v-model="form.fullname"
                    placeholder-class="phd_color"
                    class="login_input" 
                    placeholder="请输入用户名"
                />
            </view>
            <view class="form-li">
                <i class="iconfont icon-shurushoujihao-baise form-i"></i>
                <input 
                    v-model="form.phone"
                    class="login_input" 
                    type="number"
                    placeholder-class="phd_color"
                    placeholder="请输入手机号码"
                    :maxlength="11"
                />
            </view>
            <view class="form-li">
                <i class="iconfont icon-Xtubiao-qingzaicishurumima form-i"></i>
                <input 
                    v-model="form.password"
                    type="password"
                    placeholder-class="phd_color"
                    class="login_input" 
                    placeholder="请输入密码"
                />
            </view>
            <view class="form-li">
                <i class="iconfont icon-Xtubiao-qingshuruyanzhengma- form-i"></i>
                <input 
                    v-model="form.confirm_pwd"
                    type="password"
                    placeholder-class="phd_color"
                    class="login_input" 
                    placeholder="请再次输入密码"
                />
            </view>
            <button class="btn_def" hover-class="btn_click" @click.native.prevent="submit">{{setPassword?'重置密码':'立即注册'}}</button>
        </view>
        <view class="register-toolibs" v-if="!setPassword">
            <text>已有账户？</text>
            <text class="toolibs-bg pointer" @click="back">立即登录</text>
        </view>
    </view>
</template>

<script>
import LoginHead from './components/header';
import { vPhone, vLength, vChinese } from '@/utils/validate';
import { passengerRegister, driverRegister, passengerForgetLogin } from '@/service/user';
export default {
    name: 'Register',
    components: {
        LoginHead
    },
    data() {
        return {
            form: {
                fullname: '',
                password: '',
                confirm_pwd: '',
                phone: ''
            },
            setPassword: null,
            timer: null
        }
    },
    onLoad(query) {
        const { setPassword } = query;
        if( setPassword === 'on') {
            this.setPassword = true;
        }
        if( setPassword === 'off') {
            this.setPassword = false;
        } 
    },
    onUnload() {
        if( this.timer ) {
            clearTimeout(this.timer);
            this.timer = null;
        }
    },
    methods: {
        back() {
            this.$Router.back();
        },
        async submit() {
            let res = Object.create(null);
            const { setPassword } = this;
            const role = this.$store.state.userRole;
            const { fullname, phone, password, confirm_pwd } = this.form;
            if( !setPassword && !vChinese.test(fullname) ) {
                this.show_Toast('none', '请输入两位以上汉字');
                return;
            }
            if( !vPhone.test(phone) ) {
                this.show_Toast('none', '请输入正确手机号');
                return;
            }
            if( !vLength.test(password) ) {
                this.show_Toast('none', '请输入六位以上密码');
                return;
            }
            if( password !== confirm_pwd ) {
                this.show_Toast('none', '两次密码不相同');
                return;
            }
            if( role === 'passenger' && !setPassword ) {
                res = await passengerRegister(this.form);
            } else if ( role === 'passenger' && setPassword ) {
                res = await passengerForgetLogin(this.form);
            } else if(  role === 'driver' && !setPassword ) {
                res = await driverRegister(this.form);
            }
            if( res.success === true ) {
                this.show_Toast('none', setPassword?'重置成功':'注册成功');
                this.timer = setTimeout(() => {
                    this.$Router.redirect('/pages/login/index');
                }, 1000);
            } else {
                this.show_Toast('none', '失败');
            }
        }
    },
}
</script>

<style lang="scss" scoped>
$btn_bg: #016BDB;
$icon_bg: #017FE2;
$font12: 24rpx;
$font13: 26rpx;
$font14: 28rpx;
$white: #fff;
$clr8: #888888;
$border_bg: #E1E1E1;
$btm_bg: #E7F0FE;
.register {
    height: 100vh;
    background-color: #f9f9f9;
    position: relative;
    /deep/.uni-navbar__content {
        position: relative;
        background-color: $btn_bg!important;
    }
    .form-layout {
        border-radius: 10rpx;
        padding-left: 46rpx;
        padding-right: 41rpx;
        background-color: $white;
        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.13);
        overflow: hidden;
        .form-li {
            margin-top: 50rpx;
            padding-top: 18rpx;
            padding-bottom: 18rpx;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border-bottom: 1px solid $border_bg;
            .form-i {
                font-size: $font14;
                color: $icon_bg;
            }
            .login_input {
                height: 38rpx;
                padding-left: 18rpx;
                font-size: $font12;
                color: #000;
                flex: 1;
            }
            /deep/.phd_color {
                color: $clr8;
            }
        }
        .btn_def {
            height: 70rpx;
            border-radius: 34rpx;
            font-size: $font13;
            color: $white;
            background-color: $btn_bg;
            margin-top: 164rpx;
            margin-bottom: 40rpx;
        }
    }
    .register-toolibs {
        position: absolute;
        bottom: 40rpx;
        left: 0;
        right: 0;
        font-size: $font12;
        text-align: center;
    }
    .toolibs-bg {
        color: $icon_bg;
        padding-left: 4px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}
</style>